<script setup lang="ts">
import { SizeUtil } from '@xtail/ui'
import { DashedDynamicBorderPropsType } from './types'

defineOptions({
  name: 'SDashedDynamicBorder'
})

withDefaults(defineProps<DashedDynamicBorderPropsType>(), {
  color: '#333',
  borderWidth: 2,
  dashSize: 5,
  speed: 300,
  animate: false,
  hover: false
})
</script>

<template>
  <div
    class="s-dashed-dynamic-border"
    :class="[
      animate ? 's-dashed-dynamic-border--animate' : '',
      hover ? 's-dashed-dynamic-border--hover' : ''
    ]"
    :style="{
      '--color': color,
      '--size': SizeUtil.unitPreHandler(borderWidth),
      '--dash-size': SizeUtil.unitPreHandler(dashSize),
      '--speed': SizeUtil.unitPreHandler(speed, 'ms')
    }"
  >
    <slot />
  </div>
</template>

<style lang="scss">
@use './style' as *;
</style>
